<template>
  <a-config-provider :locale="antdLocale">
    <div>
      <a-button type="primary" @click="changeLang">切换语言</a-button>
      <p>当前语言:{{ language }}</p>
      <div>
        <div>{{ $t("title.login") }}</div>
        <div>{{ $t("btn.cancal") }}</div>
        <div>{{ $t("btn.submit") }}</div>
        <div>{{ $t("btn.sure") }}</div>
        <div>{{ $t("btn.shutdown") }}</div>
        <div>{{ $t("btn.login") }}</div>
      </div>
      <div>
        <a-space direction="vertical" :size="12">
          <a-range-picker />
          <a-range-picker show-time />
          <a-range-picker picker="week" />
          <a-range-picker picker="month" />
          <a-range-picker picker="year" />
        </a-space>
      </div>
    </div>
  </a-config-provider>
</template>

<script>
import { mapState } from "vuex";
import lang from "./util/lang";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import enUS from "ant-design-vue/es/locale/en_US";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
export default {
  data() {
    return {
      locales: {
        zh: zhCN,
        en: enUS,
      },
    };
  },
  computed: {
    ...mapState(["lang"]),
    language() {
      return lang[this.lang];
    },
    antdLocale() {
      return this.locales[this.lang];
    },
  },
  methods: {
    changeLang() {
      if (this.lang == "zh") {
        this.$store.commit("changeLang", "en");
        this.$i18n.locale = "en"; // 更新 i18n 语言
        this.locale;
      } else {
        this.$store.commit("changeLang", "zh");
        this.$i18n.locale = "zh"; // 更新 i18n 语言
      }
    },
  },
};
</script>
